<!DOCTYPE HTML>

<html>

<head>
  <title>datetime editor examples</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <!-- Enable responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <!-- Bootstrap4 -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- fontawesome5 -->
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>

  <!-- Handlebars -->
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

  <!-- Flatpickr -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.js" integrity="sha256-/irFIZmSo2CKXJ4rxHWfrI+yGJuI16Z005X/bENdpTY=" crossorigin="anonymous"></script>
  
  <!-- JSON-Editor -->
  <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>

  <style type="text/css">
  body {
    margin: 1em;
  }

  </style>
</head>

<body>
  <h2>Extended handling of date, time and datetime-local type fields.</h2>

  <p>Works with both string and integer data types. (If integer is used, the date will be returned in epoch format)</p>

  <p>Has optional support for using <a href="https://flatpickr.js.org/" target="_blank" title="Flatpickr datepicker">flatpickr datepicker</a>.</p>
  <p>All flatpickr options is supported with a few minor differences.
  <ul>
    <li>"<strong>enableTime</strong>" and "<strong>noCalendar</strong>" are set automatically, based on the data type.</li>
    <li>Extra config option "<strong>errorDateFormat</strong>". If this is set, it will replace the format displayed in error messages.</li>
    <li>It is not possible to use "<strong>inline</strong>" and "<strong>wrap</strong>" options together.</li>
    <li>When using the "<strong>wrap</strong>" option, "toggle" and "clear" buttons are automatically added to markup. 2 extra boolean options ("<strong>showToggleButton</strong>" and "<strong>showClearButton</strong>") are available to control which buttons to display. Note: not all frameworks supports this. (Works in: Bootstrap and Foundation)</li>
    <li>When using the "inline" option, an extra boolean option ("<strong>inlineHideInput</strong>") is available to hide the original input field.</li>
    <li>If "mode" is set to either "multiple" or "range", only string data type is supported. Also the result from these is returned as a string, not an array.</li>
  </ul></p>
  <div id="form"></div>
  <script type="text/javascript">

  // Handlebars helper for displaying timestamps in human frindly format
  Handlebars.registerHelper("TimeStampToDateTime", function(ts) {
    return ts ? new Date(ts * 1000) : 'empty';
  });

  var options = {
    "theme": "bootstrap4",
    "template": "handlebars",
    "iconlib": "fontawesome5",
    "schema": {
      "title": "datetime editor examples",
      "id": "test",
      "type": "object",
      "format": "grid",
      "options": {
        "disable_edit_json": false,
        "disable_properties": false
      },
      "properties": {
        "sdate": {
          "type": "string",
          "format": "date",
          "title": "Date (String)",
          "description": "Standard date field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter date"
            }
          }
        },
        "stime": {
          "type": "string",
          "format": "time",
          "title": "Time (String)",
          "description": "Standard time field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter time"
            }
          }
        },
        "sdatetime": {
          "type": "string",
          "format": "datetime-local",
          "title": "Datetime (String)",
          "description": "Standard datetime-local field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "YYYY-MM-DD HH:SS"
            }
          }
        },

        "fsdate": {
          "type": "string",
          "format": "date",
          "title": "Date (String)",
          "description": "Standard date field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter date"
            },
            "flatpickr": {
              "inlineHideInput": true,
              "wrap": true,
              "allowInput": true
            }
          }
        },
        "fstime": {
          "type": "string",
          "format": "time",
          "title": "Time (String)",
          "description": "Standard time field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter time"
            },
            "flatpickr": {
              "wrap": true,
              "showClearButton": false,
              "inlineHideInput": true,
              "defaultHour": 7,
              "defaultMinute": 19,
              "enableSeconds": true,
              "hourIncrement": 2,
              "minuteIncrement": 3,
              "time_24hr": true,
              "allowInput": true
            }
          }
        },
        "fsdatetime": {
          "type": "string",
          "format": "datetime-local",
          "title": "Datetime (String)",
          "description": "Standard datetime-local field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "wrap": true,
              "time_24hr": true,
              "allowInput": true
            }
          }
        },

        "idate": {
          "type": "integer",
          "format": "date",
          "title": "Date (Integer)",
          "description": "Integer date field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter date"
            }
          }
        },
        "itime": {
          "type": "integer",
          "format": "time",
          "title": "Time (Integer)",
          "description": "Integer time field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter time"
            }
          }
        },
        "idatetime": {
          "type": "integer",
          "format": "datetime-local",
          "title": "Datetime (Integer)",
          "description": "Integer datetime-local field",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            }
          }
        },

        "fidate": {
          "type": "integer",
          "format": "date",
          "title": "Date (Integer)",
          "description": "Integer date field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter date"
            },
            "flatpickr": {
              "wrap": true,
              "time_24hr": true,
              "allowInput": true
            }
          }
        },
        "fitime": {
          "type": "integer",
          "format": "time",
          "title": "Time (Integer)",
          "description": "Integer time field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter time"
            },
            "flatpickr": {
              "wrap": true,
              "time_24hr": true,
              "allowInput": true
            }
          }
        },
        "fidatetime": {
          "type": "integer",
          "format": "datetime-local",
          "title": "Datetime (Integer)",
          "description": "Integer datetime-local field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "wrap": true,
              "time_24hr": true,
              "allowInput": true
            }
          }
        },
        "isofsdatetime": {
          "type": "string",
          "format": "datetime-local",
          "title": "Datetime (String)",
          "description": "ISO datetime-local field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "dateFormat": "Z",
              "wrap": true,
              "allowInput": true,
              "enableSeconds": true,
            }
          }
        },
        "isofidatetime": {
          "type": "integer",
          "format": "datetime-local",
          "title": "Datetime (Integer)",
          "description": "ISO datetime-local field with flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "dateFormat": "Z",
              "wrap": true,
              "allowInput": true,
              "enableSeconds": true,
            }
          }
        },
        "fisdatetime": {
          "type": "string",
          "format": "datetime-local",
          "title": "Datetime (String)",
          "description": "Standard datetime-local field with inline flatpickr",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "inline": true,
              "time_24hr": true
            }
          }
        },
        "fisdate": {
          "type": "string",
          "format": "date",
          "title": "Date (String)",
          "description": "Standard date field with inline flatpickr and hidden input",
          "options": {
            "grid_columns": 4,
            "inputAttributes": {
              "placeholder": "Enter datetime"
            },
            "flatpickr": {
              "inlineHideInput": true,
              "inline": true,
              "time_24hr": true
            }
          }
        },

      }
    }
  }

  var element = document.getElementById('form');
  var editor = new JSONEditor(element, options);

  </script>
</body>

</html>
